<script setup lang="ts">
import { reactive, onBeforeMount,toRaw} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { user as useUser, auth as useAuth } from '@/store'
import mySubMenu from './mySubMenu.vue'
import {primaryColor_rgb,primaryColorFade} from "@/theme/config"

const state = reactive({
	selectedKeys: [] as string[],
	openKeys: [] as string[],
	activePath: [] as string[],
	iconStyle: {fontSize:'15px'},
})

const router = useRouter()
const route = useRoute()

const auth = useAuth()
// console.log(user.info)

onBeforeMount(() => {
	changeOpen()
	changeActivePath()
	changeActive()
})

const changeActive = (key?: string) => {
	// console.log('changeActive')
	if (key) {
		state.selectedKeys = [key]
		return
	}
	if (route.name == 'home') {
		state.selectedKeys = []
		return
	}
	state.selectedKeys = [route.name as string]
	// console.log([...state.selectedKeys])
}
const changeOpen = () => {
	// console.log('chageOpen')
	if (route.name == 'home') return
	state.openKeys = route.path.split('/') as any
}

// 只适用于路由path和name高度适配的情况
const changeActivePath = (path?: string) => {
	if (path) {
		state.activePath = path.split('/')
		return
	}
	state.activePath = route.path.split('/')
}

const changeActivePathPlus = (targetKey: string, treeArr: routeItemConfig[] = auth.menu) => {
	treeArr.forEach((i) => {
		if (i.children) {
			i.children.forEach((j) => {
				if (j.name == targetKey) {
					state.activePath = [i.name]
					return true
				}
				if (j.children && changeActivePathPlus(targetKey, j.children)) {
					state.activePath = [i.name]
					return true
				}
			})
		}
	})
	return false
}

const handleSelect = (e: any) => {
	// console.log(e)
	state.activePath = e.keyPath
}

const bindMenuItemClicked=(i:routeItemConfig)=>{
	//console.log(i)
	if(!i.meta.link&&!i.component) {
		console.warn('请配置组件路径',toRaw(i))
		return
	}
	if(i.meta.link)
	window.open(i.path)
	else
	if (route.name !== i.name) router.push({ name:i.name})
}

defineExpose({
	changeActive,
	changeOpen,
	changeActivePath,
})
</script>

<template>
	<!--theme="dark"  triggerSubMenuAction="click"  用作菜单折叠时审查菜单项元素-->
	<a-menu mode="inline" theme="light" class="layout-sideMenu"
	 @click="handleSelect" v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" >
		<template v-for="(item, index) in auth.menu">
			<a-menu-item v-if="!item.children" :key="item.name" @click="bindMenuItemClicked(item)">
				<template #icon>
					<span v-if="item.meta.icon" :class="['menu-item-aliIcon','iconfont',`icon-${item.meta.icon}`]" :style="{...state.iconStyle,color:state.selectedKeys[0]==item.key?primaryColor_rgb:'black'}"></span>
				</template>
				<span>{{ item.meta.title }}</span>
			</a-menu-item>
			<mySubMenu v-else :key="index" :subMenu="item" :selected-key="state.selectedKeys[0]" :active-path="state.activePath" :icon-style="state.iconStyle" />
		</template>
	</a-menu>
</template>

<style lang="less" scoped>
.layout-sideMenu{
	:deep(.ant-menu-item span),
	:deep(.ant-menu-submenu) {
		user-select: none;
	}
}
:global(.layout-sideMenu .ant-menu-item-icon) {
	// height: 100%;
	display: inline-flex;
	align-items: center;
}
:global(.ant-menu-item:hover .menu-item-aliIcon){
         color: v-bind(primaryColor_rgb) !important;
}
</style>

